<!--
 作者：ex_baiyc
 日期：2016-11-12
 功能：仪表盘组件
 参数：'chartWidth', 'chartHeight', 'chartData'
 事件：将父组件中传递过来的 chartData 赋值给图表
-->
<template>
  <div class="chart-view flex1">
    <div :id="chartContainerId" :style="{width: chartWidth, height: chartHeight}">
    </div>
  </div>
</template>

<script>
//  import Echarts from 'echarts/lib/echarts'
  import 'echarts/lib/chart/gauge'
  import 'echarts/lib/component/legend'
  import 'echarts/lib/component/tooltip'
  /*eslint-disable*/
  export default{
    props: ['chartWidth', 'chartHeight', 'chartData'],
    data () {
      return {
        myChart: {},
        chartContainerId: 'chart-view-container-' + new Date().getMilliseconds() + Math.random().toString(36).substring(3, 8)
      }
    },
    events: {},
    ready: function () {
    },
    watch: {
      'chartData.seriesData': function () {
        var dataOption = {
          tooltip: {
            formatter: "{a} <br/>{c} {b}"
          },
          grid: {
            top: '0',
            left: '3%',
            right: '3%',
            bottom: '3%'
          },
          series: [
            {
              name: '分',
              type: 'gauge',
              z: 3,
              min: 0,
              max: 5,
              radius: '80%',
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  width: 4,
                  color: [[0.2, '#8BB4FF'], [0.8, '#B889FF'], [1, '#FF8BD1']]
                }
              },
              axisTick: {            // 坐标轴小标记
                length: 10,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: 'auto'
                }
              },
              pointer: {
                width:3,
                shadowColor : '#fff', //默认透明
                shadowBlur: 5
              },
              axisLabel: {
                formatter: function (val) {
                  if (val === 0.5) {
                    return '很不满意'
                  }
                  if (val === 1.5) {
                    return '不满意'
                  }
                  if (val === 2.5) {
                    return '一般'
                  }
                  if (val === 3.5) {
                    return '满意'
                  }
                  if (val === 4.5) {
                    return ' 很满意'
                  }
                },
                show: true,
                distance: 5,
                textStyle: {
                  fontSize: 8,
                  color: ['#999']
                }
              },
              splitLine: {           // 分隔线
                length: 20,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              title: {
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder',
                  fontSize: 10,
                  fontStyle: 'italic'
                }
              },
              detail: {
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder',
                  fontSize: 24,
                  color: '#999'
                },
                offsetCenter: [0, '65%'],
                formatter: function (value) {
                  return value + '分';
                }
              },
              data: [{value: this.chartData.seriesData, name: ''}]
            }
          ]
        }
        this.$nextTick(function () {
          var chartContainer = document.getElementById(this.chartContainerId)
          if (chartContainer) {
            this.myChart = window.Echarts.init(chartContainer)
            this.myChart.setOption(dataOption)
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .chart-view {
    position: relative;
  }
</style>
